今日目標說明

今天我們將正式啟動專案！第一步，讓我們先把前端的地基打好。我們將使用 Vite 來建立一個 React + TypeScript 的專案，並整理一下預設的目錄結構，為後續引入 Material UI 做好準備。

核心程式碼片段

要使用 Vite 建立專案非常簡單，請打開您的終端機，輸入以下指令：

# 建立名為 frontend 的專案，並選擇 react 與 typescript
npm create vite@latest frontend -- --template react-ts

# 進入資料夾
cd frontend

# 安裝依賴套件
npm install

# 啟動開發伺服器
npm run dev

成功啟動後，我們將精簡 src 目錄下的檔案，刪除不需要的 App.css 與預設的 SVG 圖片，並保持 App.tsx 的純淨：

// src/App.tsx
import React from 'react';

function App() {
  return (
    <div>
      <h1>寶可夢持有追蹤系統</h1>
    </div>
  );
}

export default App;

【技術原理解析】為什麼 Vite 這麼快？

如果您以前用過 Create React App (CRA)，一定會對 Vite 按下 npm run dev 後那不到 1 秒鐘的啟動速度感到震驚。Vite 的魔法究竟在哪裡？

• 傳統打包 (如 Webpack)：在啟動開發伺服器前，它必須把整個專案（包含龐大的 node_modules）從頭到尾掃描、編譯並「打包成一包」，專案越大，啟動越慢。
• Vite 的原生 ES 模組 (ESM)：Vite 在開發模式下不需要先把整個應用程式打包成單一檔案，而是利用現代瀏覽器對 ES Module 的支援，讓瀏覽器依照需求取得模組，Vite 再即時處理需要的檔案。
• 預構建 (Pre-bundling)：對於不常變動的第三方套件 (如 React, MUI)，Vite 會先用 Go 語言編寫的 esbuild 瞬間預先打包好，速度比傳統基於 JavaScript 的工具快上 10 到 100 倍！

這種「需要時才處理」的哲學，徹底解放了前端開發者的等待時間。

實際畫面截圖

1. 瀏覽器畫面：網址列 http://localhost:5173 與畫面上顯示「寶可夢持有追蹤系統」的單純網頁。

2. VS Code 檔案總管：精簡後的 src 目錄結構，可以對照確認檔案是否有刪除正確。

小結

Vite 的啟動速度是不是讓人非常驚豔呢？前端的起步非常順利，明天我們接著來搞定後端的 Express 初始化設定！